<html>

<head>
    <meta charset="utf-8" />
    <title>材质动画</title>
    <script src='../w3d.js' type="text/javascript"></script>
    <script src='../config.js' type="text/javascript"></script>
    <script src='../../lib/lil-gui.umd.min.js' type="text/javascript"></script>
    <script type="text/javascript">
        let engine, scene, canvas, body, pointLight, sampler, m;
        function init() {
            canvas = document.getElementById('canvas');
            body = document.getElementById('body');
            let path = [
                `../../demo/pub/assets/skybox/night/pos-x.jpg`,
                `../../demo/pub/assets/skybox/night/neg-x.jpg`,
                `../../demo/pub/assets/skybox/night/pos-y.jpg`,
                `../../demo/pub/assets/skybox/night/neg-y.jpg`,
                `../../demo/pub/assets/skybox/night/pos-z.jpg`,
                `../../demo/pub/assets/skybox/night/neg-z.jpg`

            ]
            engine = new w.Engine({auth,
                canvas: canvas,
                contextmunu: false,//是否支持右键菜单
                background: path,
                environment: path,
                intensity: 1,
                ambientColor: "#ffffff",
                ambientIntensity: 1.0
            });
            engine.init(this.initGPU);
        }
        function initGPU() {
            scene = engine.scene;
            // scene.orbit.maxPitch=Math.PI/3;//限制操作相机的orbit组件的最大倾斜角度。
            initCamera();//初始化相机姿态
            addMesh();//添加物体
            addLight();//添加光照
            addAnimation();//添加光照动画
            initGUI();
        }
        function initCamera() {
            let camera = engine.scene.getCamera()
            camera.near = 0.01;
            camera.far = 100;
            camera.trans.position = [0, 0, 2];
            camera.pitch = Math.PI / 4;
        }
        function addLight() {
            pointLight = new w.light.PointLight({
                intensity: 5.0,
            });
            let lightObject = new w.Object3D({ position: [3, 0, 1] });
            lightObject.addComponent(pointLight);
            scene.addEntity(lightObject);
        }
        function addMesh() {
            let position = new Float32Array([
                -0.5, -0.5, 0.5,
                -0.5, -0.5, -0.5,
                0.5, -0.5, -0.5,
                0.5, -0.5, 0.5,
                -0.5, 0.5, 0.5,
                -0.5, 0.5, -0.5,
                0.5, 0.5, -0.5,
                0.5, 0.5, 0.5,
            ]);
            let color = new Uint8Array([
                25, 30, 30, 255,
                200, 0, 255, 255,
                200, 90, 90, 255,
                200, 255, 0, 255,
                0, 255, 255, 255,
                0, 255, 180, 255,
                200, 210, 210, 255,
                0, 240, 240, 255,
            ]);
            let indices = new Uint32Array([
                0, 1, 2, 0, 2, 3,//前
                4, 7, 6, 4, 6, 5,//后
                0, 4, 5, 0, 5, 1,//左
                7, 3, 2, 7, 2, 6,//右
                7, 4, 0, 7, 0, 3,//上
                1, 5, 6, 1, 6, 2,//下
            ]);
            let g = new w.geometry.Geometry();
            g.indices = indices;
            g.position = position;
            g.color = color;
            m = new w.material.BasicMaterial({
                color: "#ff0000"
            });//标准材质
            let mesh = new w.component.Mesh({ geometry: g, material: m, name: "mesh" });
            let object3d = new w.Object3D({ rotation: [0, 0, 0] });
            object3d.addComponent(mesh);
            scene.addEntity(object3d);
        }
        function addAnimation(easing) {
            //添加位置动画
            let animation = new w.animation.Animation({ id: "point", loop: 0 });
            //position
            sampler = new w.animation.Sampler([0,3,6],[[1,0,0,1],[1,1,0,1],[1,0,0,1]], "LINEAR", easing);
            let channel = new w.animation.Channel(m, "color");
            channel.add(sampler);
            animation.add(channel);
            scene.addAnimation(animation);
        }
        function initGUI() {
            const GUI = lil.GUI;
            const gui = new GUI();
            let folder = gui.addFolder('animation');
            folder.add(sampler, 'color', easing);
        }
    </script>
    <style>
        html,
        body,
        #canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body onload="init()">
    <canvas id="canvas"></canvas>
</body>

</html>